<template>
  <div class="home">
    <!-- 搜索框-添加 -->
    <el-input placeholder="搜索" v-model="input" clearable style="width: 300px">
    </el-input>
    <el-button type="primary" @click="seach({ searchKey: input })"
      >查询</el-button
    >
    <el-button type="primary" @click="openAdd">新增</el-button>

    <el-table
      :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
      style="width: 100%; text-align: center; margin-top: 10px"
      border
      lazy
    >
      <el-table-column prop="name" label="服务器名称" width="180">
      </el-table-column>
      <el-table-column prop="ip" label="服务器ip" width="180">
      </el-table-column>
      <el-table-column prop="state" label="服务器状态" width="180">
      </el-table-column>
      <el-table-column prop="mark" label="备注"> </el-table-column>
      <el-table-column prop="createTime" label="创建时间"> </el-table-column>
      <el-table-column prop="user" label="归属人"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="openUpdate(scope.row)" :disabled="dis">编辑</el-button>
          <el-button size="mini" @click="del(scope.row)" :disabled="dis">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @current-change="currentChangeHandle"
      @size-change="sizeChangeHandle"
      layout="prev, pager, next, jumper"
      :total="total"
      style="text-align:right;"
    >
    </el-pagination>

    <!-- 新增对话框 -->
    <el-dialog
      title="新增"
      :visible.sync="dialogFormVisible"
      style="text-align: center"
    >
      <el-form :model="form">
        <el-form-item label="服务器名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="服务器状态" :label-width="formLabelWidth">
          <el-input v-model="form.state" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="form.mark" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="服务器ip" :label-width="formLabelWidth">
          <el-input v-model="form.ip" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="归属人" :label-width="formLabelWidth">
          <el-input v-model="form.user" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 编辑对话框 -->
    <el-dialog
      title="修改服务器信息"
      style="text-align: center"
      :visible.sync="dialogFormVisible1"
    >
      <el-form :data="form1">
        <el-form-item label="服务器名称" :label-width="formLabelWidth1">
          <el-input v-model="form1.name" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="服务器状态" :label-width="formLabelWidth1">
          <el-input v-model="form1.state" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth1">
          <el-input v-model="form1.mark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  methods: {
    update() {
      this.$axios.post("/api/server/re", this.form1).then((res) => {
        console.log(res);
        this.dialogFormVisible1 = false;
        window.location.reload();
      });
    },

    openUpdate(row) {
      this.$axios
        .post("/api/server/details", { name: row.name })
        .then((res) => {
          console.log(res);
          // this.form1 = res.data.data;
          this.form1 = JSON.parse(JSON.stringify(row));
        });

      console.log(row);
      this.dialogFormVisible1 = true;
    },

    openAdd() {
      this.dialogFormVisible = true;
      this.form = {};
    },

    add() {
      this.$axios.post("/api/server/add", this.form).then((res) => {
        console.log(res);
        this.dialogFormVisible = false;
        window.location.reload();
      });
    },

    del(row) {
      this.$axios
        .post("/api/server/del", { id: row.id, user: row.user })
        .then((res) => {
          console.log(res);
          window.location.reload();
        });
    },

    seach(params) {
      this.$axios.post("/api/server/show", params).then((res) => {
        console.log(res);
        this.tableData = res.data.data;
        this.total = res.data.total;
      });
    },
      currentChangeHandle(e){
      console.log("当前页码",e);
      this.currentPage=e;
    },
    sizeChangeHandle(e){
      console.log("每页显示多少条数据",e);
      this.pageSize=e;
    }
  },
  data() {
    return {
      dis: true,
      currentPage: 1,
      pageSize:10,
      total: 0,
      input: "",
      tableData: [],
      dialogFormVisible: false,
      form: {},
      formLabelWidth: "120px",
      dialogFormVisible1: false,
      form1: {
        name: "",
        state: "",
        mark: "",
      },
      formLabelWidth1: "120px",
    };
  },
  created() {
    this.seach({});
    if(sessionStorage.getItem('sex')=="管理员"){
      this.dis=false;
      console.log(this.dis);
    }
  },
  // watch: {
  //   current: function () {
  //     this.seach({ pageNum: this.current });
  //   },
  // },
};
</script>

<style>
.el-header {
  padding: 0 !important;
  margin: 0 !important;
}
</style>